/**
 * Copyright (c) Enalean, 2018. All Rights Reserved.
 *
 * This file is a part of Tuleap.
 *
 * Tuleap is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * Tuleap is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Tuleap. If not, see <http://www.gnu.org/licenses/>.
 */

(<template>
    <div class="cross-tracker-selector">
        <div class="tlp-form-element" v-bind:class="{ 'tlp-form-element-disabled': is_project_select_disabled }">
            <label class="tlp-label" for="project">{{ project_label }} <i class="fa fa-asterisk"></i></label>
            <select
                class="cross-tracker-selector-project-input tlp-select"
                id="project"
                name="project"
                v-bind:disabled="is_project_select_disabled"
                v-model="selected_project"
            >
                <option v-for="project of projects" v-bind:value="project">
                    {{ project.label }}
                </option>
            </select>
        </div>
        <div class="tlp-form-element" v-bind:class="{ 'tlp-form-element-disabled': is_tracker_select_disabled }">
            <label class="tlp-label" for="tracker">{{ tracker_label }} <i class="fa fa-asterisk"></i></label>
            <div class="tlp-form-element tlp-form-element-append">
                <select
                    class="cross-tracker-selector-tracker-input tlp-select"
                    id="tracker"
                    name="tracker"
                    v-bind:disabled="is_tracker_select_disabled"
                    v-model="selected_tracker"
                >
                    <option v-bind:value="null" class="cross-tracker-please-choose-option">{{ please_choose_label }}</option>
                    <option
                        v-for="tracker of tracker_options"
                        v-bind:value="{ id: tracker.id, label: tracker.label }"
                        v-bind:disabled="tracker.disabled"
                    >{{ tracker.label }}</option>
                </select>
                <button
                    type="button"
                    class="tlp-append tlp-button-primary tlp-button-outline"
                    v-bind:disabled="is_add_button_disabled"
                    v-on:click="addTrackerToSelection"
                >
                    <i v-if="is_loader_shown" class="tlp-button-icon fa fa-spinner fa-spin"></i>
                    <i v-else class="tlp-button-icon fa fa-plus"></i> {{ add_button_label }}
                </button>
            </div>
        </div>
    </div>
</template>)
(<script>
    import { gettext_provider }             from '../gettext-provider.js';
    import { getSortedProjectsIAmMemberOf } from './projects-cache.js';
    import { getTrackersOfProject }         from '../rest-querier.js';

    export default {
        name: 'TrackerSelection',
        props: [
            'selectedTrackers'
        ],
        data() {
            return {
                selected_project: null,
                selected_tracker: null,
                projects: [],
                trackers: [],
                is_loader_shown: false
            }
        },
        watch: {
            selected_project: function(new_value) {
                this.selected_tracker = null;
                this.trackers         = [];
                this.loadTrackers(new_value.id);
            }
        },
        computed: {
            project_label      : () => gettext_provider.gettext("Project"),
            tracker_label      : () => gettext_provider.gettext("Tracker"),
            add_button_label   : () => gettext_provider.gettext("Add"),
            please_choose_label: () => gettext_provider.gettext('Please choose...'),
            is_project_select_disabled() {
                return this.projects.length === 0;
            },
            is_tracker_select_disabled() {
                return this.trackers.length === 0;
            },
            is_add_button_disabled() {
                return this.selected_tracker === null;
            },
            tracker_options() {
                return this.trackers.map(({ id, label }) => {
                    const is_already_selected = this.selectedTrackers.find(({ tracker_id }) => id === tracker_id);
                    return {
                        id,
                        label,
                        disabled: is_already_selected !== undefined
                    }
                });
            }
        },
        methods: {
            async loadProjects() {
                this.is_loader_shown = true;
                try {
                    this.projects         = await getSortedProjectsIAmMemberOf();
                    this.selected_project = this.projects[0];
                } catch (error) {
                    this.$emit('error', gettext_provider.gettext('Error while fetching the list of projects you are member of'));
                    throw error;
                } finally {
                    this.is_loader_shown = false;
                }
            },

            async loadTrackers(project_id) {
                this.is_loader_shown = true;
                try {
                    this.trackers = await getTrackersOfProject(project_id);
                } catch (error) {
                    this.$emit('error', gettext_provider.gettext('Error while fetching the list of trackers of this project'));
                    throw error;
                } finally {
                    this.is_loader_shown = false;
                }
            },

            addTrackerToSelection() {
                this.$emit('trackerAdded', {
                    selected_project: this.selected_project,
                    selected_tracker: this.selected_tracker
                });
                this.selected_tracker = null;
            },
        },
        mounted() {
            this.loadProjects();
        }
    }
</script>)
